<template>
  <el-menu
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd84b"
  style="height: 100vh;"
  default-active="/User">
    <el-aside width="200px">
<el-scrollbar>
  <el-menu 
  default-active="/myHome"
  router> 
    <el-sub-menu >
      <template #title>
        <div style="display: block; text-align: center; font-size: 18px;">
          <el-icon ><Menu /></el-icon>
        菜单选项
        </div> 
      </template> 
      <el-menu-item-group>   

        <el-menu-item :index="'/'+item.menuClick" v-for="(item,i) in menu" :key="i">
          <el-icon><component :is="item.menuIcon"></component></el-icon>
          <span>{{ item.menuName }}</span>       
         </el-menu-item>
      </el-menu-item-group>

    </el-sub-menu>
  </el-menu>
</el-scrollbar>
</el-aside>
  </el-menu>
</template>

<script setup>
import store from '@/store';
import { Menu as IconMenu, HomeFilled, Menu, UserFilled,List, TrendCharts } from '@element-plus/icons-vue'
import { ElIcon, useTransitionFallthroughEmits } from 'element-plus';
import { computed, onBeforeMount, ref } from 'vue';

const menu = ref(store.state.menu);

const computedMenu = computed(() => {
  return menu.value;
});

/*const menu = reactive([
  {
    menuClick:'myHome',
    menuName:'我的首页',
    menuIcon:'HomeFilled'
  },
  {
    menuClick:'myPrice',
    menuName:'价格详情',
    menuIcon:'TrendCharts'
  },
  {
    menuClick:'myOrder',
    menuName:'订单列表',
    menuIcon:'List'
  },
  {
    menuClick:'myMain',
    menuName:'用户列表',
    menuIcon:'UserFilled'
  }
])*/
</script>